<template>
  <div id="NewCountryGram" ref="NewCountryGram" style="height: 100%">

  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "EchartsFillRingDiagram",
  mounted() {
    this.initEcharts();
    },
  props:{
    countyNumber:Object
  },
  watch:{
    countyNumber:{
      handler(newName, oldName) {
        this.setData();
      },
      deep: true
    }
  },
  data() {
    return {
      mycolor:this.$store.state.color
    }
  },
  methods:{
    initEcharts() {
      var chartDom = this.$refs.NewCountryGram;
      this.mychart = echarts.init(chartDom);
      this.options = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top:"top"
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            color:[this.mycolor.wtoArea,this.mycolor.natoArea,this.mycolor.commonArea],
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '华约成员国' },
              { value: 12, name: '北约成员国' },
              { value: 183, name: '不结盟国家' },
            ]
          }
        ]

      };
      this.mychart.setOption(this.options)
    },
    setData(){
      this.options.series[0].data[0].value=this.countyNumber.wto
      this.options.series[0].data[1].value=this.countyNumber.nato
      this.options.series[0].data[2].value=this.countyNumber.comm
      this.mychart.setOption(this.options)
    }
  }
}
</script>

<style scoped>

</style>